<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import useTable from '@/hooks/useTable'
import { TableColumnData } from '@arco-design/web-vue'
interface SignItem {
  day: number
  isExp: number
  exp: number
  isIntegral: number
  integral: number
}
const props = defineProps<{
  val: SignItem[]
}>()
const emit = defineEmits(['change'])
const { formatColumns } = useTable()
const tableData = ref(props.val)
watch(
  () => tableData.value,
  n => {
    formatData()
  },
  {
    deep: true,
  }
)
const empty = {
  day: 0,
  isExp: 0,
  exp: 0,
  isIntegral: 0,
  integral: 0,
}
const formatData = () => {
  const list: any[] = []
  tableData.value.map(v => {
    const _item: any = { ...v }
    if ([undefined, ''].includes(_item.integral)) {
      message({
        type: 'error',
        content: '赠送积分值不能为空',
      })
      return
    }
    if ([undefined, ''].includes(_item.exp)) {
      message({
        type: 'error',
        content: '赠送经验值不能为空',
      })
      return
    }
    if (_item.integral > 0) _item.isIntegral = 1
    if (_item.exp > 0) _item.isExp = 1

    list.push(_item)
  })
  console.log('🚀 ~ formatData ~ list:', list)
  emit('change', list)
}
const columns = formatColumns([
  {
    title: '连续天数',
    dataIndex: 'day',
    width: 120,
  },
  {
    title: '连续奖励',
    dataIndex: 'data',
    width: 420,
  },
  {
    title: '操作',
    dataIndex: 'op',
    fixed: 'right',
    width: 100,
  },
]) as TableColumnData[]
</script>
<template>
  <a-space style="width: 100%" direction="vertical">
    <a-button type="text" @click="tableData.push({ ...empty })">添加</a-button>
    <a-table :columns="columns" :data="tableData" header-title="连续签到配置" :pagination="false" :bordered="{ cell: true }" :scroll="{ x: 500 }">
      <template #day="{ record }">
        <a-input-number :min="0" v-model="record.day" placeholder="请输入天数" />
      </template>
      <template #data="{ record }">
        <a-space>
          <div class="item flex-center">
            <span class="mr10">赠送积分值</span>
            <a-input-number :min="0" v-model="record.integral" style="width: 100px" placeholder="积分值" hide-button />
          </div>
          <div class="item flex-center">
            <span class="mr10"> 赠送经验值 </span>
            <a-input-number :min="0" v-model="record.exp" style="width: 100px" placeholder="经验值" hide-button />
          </div>
        </a-space>
      </template>
      <template #op="{ record, rowIndex }">
        <a-button type="text" @click="tableData.splice(rowIndex, 1)">删除</a-button>
      </template>
    </a-table>
  </a-space>
</template>
<style lang="less" scoped></style>
